import React from "react";
import ReactECharts from "echarts-for-react";
import classes from "./Charts.module.css";
export default function Charts({ theme }) {
    const options = {
        tooltip: {
            trigger: "item",
        },
        legend: {
            top: "5%",
            left: "center",
            textStyle: {
                color: theme === "light" ? "#000" : "#fff",
            },
        },
        series: [
            {
                name: "Access From",
                type: "pie",
                radius: ["5%", "100%"],
                center: ["50%", "60%"],
                roseType: "radius",
                // adjust the start angle
                itemStyle: {
                    borderRadius: 5,
                },
                startAngle: 180,
                label: {
                    position: "inner",
                    show: false,
                },
                data: [
                    { value: 1048, name: "Food" },
                    { value: 484, name: "Uber" },
                    { value: 300, name: "Shopping" },
                    {
                        // make an record to fill the bottom 50%
                        value: 1048 + 484 + 300,
                        itemStyle: {
                            // stop the chart from rendering this piece
                            color: "none",
                            decal: {
                                symbol: "none",
                            },
                        },
                        label: {
                            show: false,
                        },
                    },
                ],
            },
        ],
    };
    return (
        <div className={classes.charts} style={{ backgroundColor: theme === "light" ? "#fff" : "#000" }}>
            <ReactECharts option={options} />
        </div>
    );
}
